<template>
    <el-dialog
      :title="'出车记录导入'"
      :close-on-click-modal="false"
      :visible.sync="visible">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">

        <el-form-item label="选择excel文件" prop="file">
          <div>
            <el-button icon="el-icon-upload2" @click="onUpLoad">点击上传</el-button>
            <span>仅允许导入xls、xlsx格式文件</span>
            <span class="download-label" @click="onDownLoad">下载出车记录模板</span>
          </div>
          <div class="file-name">{{dataForm.file?dataForm.file.name:'未选择任何文件'}}</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer c-flex c-flex-jus-center" >
        <el-button  @click="visible = false;">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </div>
      <input type="file" id="filed" hidden accept=".xls,.xlsx" @change="onFilePreview">
    </el-dialog>
</template>

<script>
  export default{
    data(){
      return {
        visible:false,
        dataForm:{
          file:''
        },
        dataRule: {

          file: [
            { required: true, message: '导入文件不能为空', trigger: 'blur' }
          ],
        }
      }
    },
    methods:{
      init(){
        this.visible = true;
      },
      onDownLoad(){
        window.open('./static/template/出车记录导入模版.xlsx','_blank');
      },
      onUpLoad(){
        document.getElementById('filed').click()
      },
      onFilePreview(e){
        let _this = this;
        this.dataForm.file = e.target.files[0];
        e.target.value = '';
        console.log(this.dataForm.file)
      },
      dataFormSubmit(){
        let formData = new window.FormData();
         formData.append('file',this.dataForm.file);
        this.$http({
          url: this.$http.adornUrl(`/tms/shipmentrecord/import`),
          method: 'post',
          data:formData
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/.el-radio+.el-radio{margin-left: 0;}
  .import-set{
    padding-top: 10px;    gap: 16px;

  }
  .download-label{
    color: #0000ff;margin-left: 20px;
    &:hover{text-decoration: underline;cursor:pointer;}
  }
</style>
